<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Animation</title>
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="./src/css/global.css">
    <style>
        /*可根据需要改变其大小*/
    .site-doc-icon li{width: 222px;}
    .site-doc-icon li .layui-anim{width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #009688; cursor: pointer; color: #fff; border-radius: 50%;}
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-tab-item layui-show site-demo">
        <div class="layui-main">
            <div class="site-content">
                <h1 class="site-h1">CSS3动画类</h1>
                <blockquote class="layui-elem-quote">
                    在实用价值的前提之下，我们并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中，发挥着重要的作用。layui 的动画全部采用 CSS3，因此不支持ie8和部分不支持ie9（即ie8/9无动画）
                </blockquote>

                <fieldset class="layui-elem-field layui-field-title site-title">
                    <legend><a name="use">使用方式</a></legend>
                </fieldset>
                <div class="site-text">
                    <p>动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。如：</p>
                    <pre class="layui-code">
其中 layui-anim 是必须的，后面跟着的即是不同的动画类
&lt;div class="layui-anim layui-anim-up">&lt;/div&gt;

循环动画，追加：layui-anim-loop
&lt;div class="layui-anim layui-anim-up layui-anim-loop">&lt;/div&gt;
      </pre>
                </div>

                <fieldset class="layui-elem-field layui-field-title site-title">
                    <legend><a name="use">内置CSS3动画一览表</a></legend>
                </fieldset>
                <div class="site-text">
                    <p>下面是不同的动画类名，数量可能有点少的样子？但正如开头所讲的，拒绝冗余花俏，拥抱精简实用。<em>点击下述绿色块，可直接预览动画</em></p>
                </div>
                <ul class="site-doc-icon">
                    <li>
                        <div class="layui-anim" data-anim="layui-anim-up">从最底部往上滑入</div>
                        <div class="code">layui-anim-up</div>
                    </li>
                    <li>
                        <div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
                        <div class="code">layui-anim-upbit</div>
                    </li>
                    <li>
                        <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
                        <div class="code">layui-anim-scale</div>
                    </li>
                    <li>
                        <div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
                        <div class="code">layui-anim-scaleSpring</div>
                    </li>
                    <li>
                        <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
                        <div class="code">layui-anim-fadein</div>
                    </li>
                    <li>
                        <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
                        <div class="code">layui-anim-fadeout</div>
                    </li>
                    <li>
                        <div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
                        <div class="code">layui-anim-rotate</div>
                    </li>
                    <li>
                        <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
                        <div class="code">追加：layui-anim-loop</div>
                    </li>
                </ul>


                <fieldset class="layui-elem-field layui-field-title site-title">
                    <legend><a name="docend">结语</a></legend>
                </fieldset>
                <div class="site-text">
                    <p>物不在多，有用则精。</p>
                </div>

                <div class="layui-elem-quote">
                    <p>Layui - 用心与你沟通</p>
                </div>

            </div>
        </div>
    </div>
</div>
<script src="./plugins/layui/layui.js"></script>
<script>
  layui.use('jquery', function(){
    var $ = layui.$;

    //演示动画
    $('.site-doc-icon .layui-anim').on('click', function(){
      var othis = $(this), anim = othis.data('anim');

      //停止循环
      if(othis.hasClass('layui-anim-loop')){
        return othis.removeClass(anim);
      }

      othis.removeClass(anim);

      setTimeout(function(){
        othis.addClass(anim);
      });
      //恢复渐隐
      if(anim === 'layui-anim-fadeout'){
        setTimeout(function(){
          othis.removeClass(anim);
        }, 1300);
      }
    });
  });
</script>
</body>
</html>